<template>
<!-- 租房页面 -->
<div>
    <!-- 顶部的蓝色导航 -->
    <uni-nav-bar  title="租房" class="navbar" backgroundColor="#1482f5" statusBar="true" color="white">
        <view slot="left">
        <text class="iconfont icon-left" @click="yback"></text>
        </view>
    </uni-nav-bar>
    <!-- 头部搜索部分 -->
    <div class="top">
        <!-- 搜索行 -->
        <div class="topserch">
            <span class="serchleft">北京  <span class="iconfont icon-iconfontarrowup" style="font-size: 10px;color: #9999;"></span></span>
           <div class="serch">
               <span style="font-size: 10px;color:#9999; margin-left:10px ;">请在这里输入区域/商圈</span>
               <span class="iconfont icon-sousuo" style="font-size: 10px;color:#9999;"></span>
           </div>
           <span class="serchright" @click="yclickmap">地图找房</span>
        </div>
        <!-- 找房按钮 -->
        <div class="house">
            <div class="classhouse">
                <span class="iconfont icon-shangpu" style="font-size: 30px;color:#fd6f0f;"></span>
                <span>找商铺</span>
            </div>
             <div  class="classhouse">
                <span class="iconfont icon-xiezilou" style="font-size: 30px;color:#faae07;"></span>
                <span>找写字楼</span>
            </div>
             <div class="classhouse">
                <span class="iconfont icon-xiaoqu" style="font-size: 30px;color:#f5ac8d;"></span>
                <span>找小区</span>
            </div>
        </div>
    </div>
    <!-- 筛选部分 -->
    <div class="screening">
        <div class="screeningleft">
            <span @click="yclickarea">区域<span class="iconfont icon-iconfontarrowup" style="font-size: 10px;color: #9999;"></span></span>
            <span @click="yclickprice">价格<span class="iconfont icon-iconfontarrowup" style="font-size: 10px;color: #9999;"></span></span>
            <span @click="yclickhousemodel">户型<span class="iconfont icon-iconfontarrowup" style="font-size: 10px;color: #9999;"></span></span>
            <span @click="yclickchoose">筛选<span class="iconfont icon-iconfontarrowup" style="font-size: 10px;color: #9999;"></span></span>
        </div>
        <div class="screeningright">
            <span class="iconfont icon-paixu" style="font-size:18px;"></span>
        </div>
    </div>
    <!-- 房子展示 -->
    <div class="houselist">
        <div class="yitemlist" v-for="item in citylist" :key="item.tid">
               <div class="imgs">
                    <img :src="item.img" alt="">
               </div>
               <div class="imgsright">
                    <span class="ytitle">{{item.title}}</span>
                    <span class="yaddress">{{item.subwayDistance}}</span>
                    <span class="yprice"><span class="ymoney">{{item.shangquan}}</span></span>
                    <span>{{item.price}}{{item.unit}}</span>
               </div>
        </div>
    </div>
</div>  
</template>
<script>
import {uniNavBar} from '@dcloudio/uni-ui';
import {getrent} from "../../services"
export default {
components: {uniNavBar},
data() {
    return {
        citylist:[],
    }
},
methods: {
      // 返回
      yback(){
     wx.navigateBack()
  },
//   点击区域
    yclickarea(){
       wx.redirectTo({
                url:"/pages/yarea/index"
            })
    },
    // 点击均价
    yclickprice(){
       wx.redirectTo({
                url:"/pages/yprice/index"
            })
    },
     // 点击筛选
    yclickchoose(){
         wx.redirectTo({
                url:"/pages/ychoose/index"
            })
    },
    // 点击户型
    yclickhousemodel(){
        wx.redirectTo({
                url:"/pages/yhousemodel/index"
        })
    },
    // 点击地图找房
    yclickmap(){
        wx.redirectTo({
             url:"/pages/mapFindRoom/index"
        })
    }
},
async created() {
    let a=await getrent(
        "?platform=58fangchan&appname=wx&action=getList&page=1&page_size=10&openid=oFf360O0SUXo3YZgztv-ERmR64rk&cityId=1&city_id=1&city=&filterParams=%7B%7D&lego_appname=fcWechat&lego_appid=wx1658c7eccb8126e7"
    )
    this.citylist=a.data.list
},
}
</script>

<style lang="scss">
@import "../../y_icon/iconfont.css";
// 整体房屋列表
.houselist{
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    .yitemlist{
        display: flex;
        align-items: center;
        .imgs{
           img{
               width: 120px;
               height: 130px;
           }
        }
        .imgsright{
            display: flex;
            flex-direction: column;
            .ytitle{
                font-size: 15px;
                font-weight: bolder;
            }
            .yaddress{
                font-size: 15px;
            }
            .yprice{
                font-size: 13px;
                color: #9999;
                .ymoney{
                    font-size: 16px;
                    font-weight: bold;
                    color: #ff9900;
                }
            }
            .ytab{
                width: 50px;
                text-align: center;
                height: 20px;
                line-height: 20px;
                background-color: #9999;
            }
        }
    }
}
// 顶部搜索部分
.topserch{
    margin-top: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .serchleft,.serchright{
        width: 80px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .serch{
        height: 20px;
        width: calc(100% - 160px);
        border: 1px solid #9999;
        background-color: #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: space-between;
       
    }
    
}
// 搜索部分的按钮样式
.house{
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #000;
        .classhouse{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }
// 筛选部分的样式
.screening{
    display: flex;
    height: 30px;
    align-items: center;
    border-bottom: 1px solid #000;
    margin-bottom: 10px;
    .screeningright{
        width: 50px;
        text-align: center;
    }
    .screeningleft{
        width: calc(100% - 50px);
        display: flex;
        justify-content: space-around;
    }
}

</style>


